<template>
    <el-container class="app-container">
        <el-header><TopBar /></el-header>
        <el-container>
            <el-aside
                class="sidebar"
                :class="{
                    'mobile-sidebar': isMobile,
                }"
                :style="{ width: sideBarWidth }"
            >
                <SideBar />
            </el-aside>

            <el-container>
                <el-main><Main /></el-main>
                <el-divider />
                <el-footer><FooterBar /></el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import FooterBar from './footerBar.vue';
import TopBar from './topBar.vue';
import SideBar from './sideBar.vue';
import Main from './main.vue'
import { useSidebarStore } from '@/store/sidebar';

const sidebarStore = useSidebarStore();

// 从store获取响应式状态
const isMobile = computed(() => sidebarStore.isMobile);
const sidebarVisible = computed(() => sidebarStore.isExpanded);
const sideBarWidth = ref<string>('220px');

watchEffect(() => {
    if (isMobile.value) {
        // 移动端：侧边栏显示时展开，隐藏时完全收起
        sideBarWidth.value = sidebarVisible.value ? '220px' : '40px';
    } else {
        // 桌面端：保持展开状态
        sideBarWidth.value = '220px';
    }
});
</script>

<style lang="scss" scoped>
// 基础布局
.app-container {
    height: 85vh;
}
.el-header {
    height: auto;
}
.el-header,
.el-footer {
    padding: 0;
    position: relative;
    z-index: 10; // 确保顶部和底部栏在最上层
}
.el-main {
    padding: 10px 10px 5px 0;
}
.el-divider--horizontal {
    margin: 10px 0;
}

.mobile-sidebar {
    height: auto;
}
// 侧边栏样式
.sidebar {
    transition: transform 0.3s ease;
    z-index: 999; // 侧边栏在内容区之上

    // 移动端侧边栏
    &.mobile-sidebar {
        height: auto;
        transform: translateX(-100%);
    }

    &.sidebar-hidden {
        transform: translateX(-100%);
    }

    &:not(.sidebar-hidden) {
        width: 220px;
        transform: translateX(0);
    }
}
</style>
